<template>
   <div class="hello">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: 'CesiumView',
  data(){
    return{
      viewer:{},
      inter:null,

    }
  },
  props: {
    msg: String
  },
  mounted() {
    /**
     *初始化cesium
     */
    
    this.initCesium(); 
    /**
     *加载geobuf数据
     */
    this.getGeobuf();
  },
  methods:{
    initCesium(){
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxOThkNmNmNS1jMjYxLTQzNDMtYjFiOC1kYTU2MGZmYzNhZjUiLCJpZCI6Njg3MjYsImlhdCI6MTY0MDIyNzMzOH0.Hq7YWBI3wJUCtpJfmrb_kQ8dtN5hn-M3km-NG_SsPiQ';
      this.viewer = new Cesium.Viewer('cesiumContainer',{      
        geocoder:false,
        homeButton:false,
        sceneModePicker:false,
        baseLayerPicker:false,
        selectionIndicator: false,
        navigationHelpButton :false,//导航帮助按钮，显示默认的地图控制帮助
        animation:false,// 动画器件，控制视图动画的播放速度.
        timeline:false,//时间线,指示当前时间，并允许用户跳到特定的时间
        creditsDisplay:false,//版权显示，显示数据归属，必选
        infoBox: false,
        fullscreenButton:false,//关闭全屏按钮
        // 注释时相当于使用默认地形，解开注释相当于使用全球地形
        terrainProvider: Cesium.createWorldTerrain({
            //基于太阳位置开启地形照明
            requestVertexNormals: true,
            //启用水体效果
            requestWaterMask: true
        })
      });
       // 隐藏版权信息
      this.viewer._cesiumWidget._creditContainer.style.display = "none";    // 隐藏版权信息
      this.viewer.scene.skyAtmosphere.show=true;    // 隐藏大气层,false, true开启
      this.viewer.scene.globe.enableLighting = true; //开启光照效果


      let that = this;
      this.viewer.scene.globe.enableLighting = true
			this.viewer.shadows = true
			this.viewer.terrainShadows = Cesium.ShadowMode.RECEIVE_ONLY
			this.viewer.shadowMap.darkness = 0.02 //阴影透明度--越大越透明
			let time = 0
      
			this.inter = setInterval(() => {
				// 改变时间设置光照效果
				let date = new Date().getTime() + time
				let utc = Cesium.JulianDate.fromDate(new Date(date))
				//北京时间
				that.viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc, 0, new Cesium.JulianDate())
				time = time + 1000 * 60
			}, 100)
      console.log(this.inter)

    },

    /**
     * 
     * 关闭光照
     * 
     */
    clearOpenLight() {
			this.viewer.scene.globe.enableLighting = false
			this.viewer.shadows = false
			this.viewer.terrainShadows = Cesium.ShadowMode.DISABLED
			if (this.inter) {
				clearInterval(this.inter)
				this.inter = null
			}
		},

    /**
     * 
     * 加载geobuf数据
     * 
     */
    getGeobuf(){

      let that = this
      //Make a request for a user with a given ID
      this.$axios({
          url: '/map/geobuf/zrz',
          method: 'get',
          data:{},
          responseType: 'arraybuffer'
      })
      .then(function (response) {
        // handle success
        console.log(response);
        var geojson =geobuf.decode(new Pbf(new Uint8Array(response.data)));
        console.log(JSON.stringify(geojson))
        that.loadGeojson(geojson)
        // map.getSource("national-park").setData(geojson)
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })     

    },

    /**
     * 
     * 加载geojson数据
     * 
     */
    loadGeojson(geojson){
      console.log(geojson)
      var promise = Cesium.GeoJsonDataSource.load('/lib/file/asa/17.geojson');
      let that = this
      promise.then(function (dataSource) {
         that.viewer.dataSources.add(dataSource);
        //获取实体数组
        var entities = dataSource.entities.values;
        for (var i = 0; i < entities.length; i++) {
            //对于每个实体，根据状态名创建一个随机的颜色。有些状态有多个实体，因此我们将颜色存储在散列中，以便我们对整个状态使用相同的颜色。
            var entity = entities[i];
            // var name = entity.ysdm;
            // var color = colorHash[name];
            // if (!color) {
            //     color = Cesium.Color.fromRandom({
            //         alpha: 1.0,
            //     });
            //     colorHash[name] = color;
            // }
            //设置多边形材质为我们的随机颜色.
            entity.polygon.material =  Cesium.Color.RED.withAlpha(0.8)                      
            //Remove the outlines.
            entity.polygon.outline = false;
            //根据州的人口数量挤出多边形。每个实体都存储了创建它所用的GeoJSON特性的属性，因为总体数量很大，我们要除以50。
            //entity.polygon.extrudedHeight = entity.properties.Population / 50.0;
            // entity.polygon.extrudedHeight = entity.properties.size._value;
            entity.polygon.extrudedHeight = 1
            // entity.polygon.extrudedHeight = index == 0 ? 20 :
            //     index == 1 ? 50 :
            //         index == 2 ? 100 :
            //             index == 3 ? 150 : 200;

        }
      }).otherwise(function (error) {
          //显示加载时遇到的任何错误.
          window.alert(error);
      });
       that.viewer.flyTo(promise); 

    },
  },
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
  height: 100%;
  #cesiumContainer {
    height: 100%;
  }
}
</style>
